<script setup>
import {ref} from 'vue';
import StrikeContent from "./StrikeContent/StrikeContent.vue";

const activeTab = ref('strikeAirIntercept');
</script>

<!--Mission Editor下半部分的右边内容-->
<!--包含StrikeContent组件（保存在strikeContent目录下）-->
<template>
  <div id="missDRight">
    <!--导航-->
    <div class="navBar">
      <!-- 第一个导航链接 -->
      <div class="navLink"
           @click="activeTab = 'strikeAirIntercept'"
           :class="{ 'active': activeTab === 'strikeAirIntercept' }">
        Strike/AirIntercept
      </div>

      <!-- 第二个导航链接 -->
      <div class="navLink"
           @click="activeTab = 'escorts'"
           :class="{ 'active': activeTab === 'escorts' }">
        Escorts
      </div>
    </div>

    <!--主体内容-->
    <div class="tabContent">
      <!-- strike/AirIntercept标签页的内容 -->
      <div v-if="activeTab === 'strikeAirIntercept'">
        <StrikeContent/>
      </div>

      <!-- escorts标签页的内容 -->
      <div v-if="activeTab === 'escorts'">
        <span>222</span>
      </div>
    </div>
  </div>
</template>

<style>
#missDRight {
  border: 1px solid white;
  height: 450px;
  padding: 5px 3px;
  background: #272727;
}

/*导航栏*/
.navBar {
  display: flex;
  color: #f0f0f0;
  border: none;
}

.navLink {
  padding:3px;
  cursor: pointer;
  background: #222222;
  font-weight: bold;
}

.navLink.active {
  background-color: #393939;
}

/*主体内容*/
.tabContent {
  padding:0 5px;
  margin-top:2px ;
  background-color: rgba(60,63,65,0.42);
}
</style>
